import React from "react"
import { withRouter } from 'react-router-dom';
import loginApi from "../../api/loginApi/index"

// 引入ul组件
import { Form, Input, Button, message, Space} from 'antd';

class Login extends React.Component{

  constructor(props){
    super(props)
    
  }
  
  render(){
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const tailLayout = {
      wrapperCol: {
        offset: 8,
        span: 16,
      },
    };
    
   
      const onFinish =async values => {
        try{
          let p =await loginApi.login(values.username,values.password)
          if(p.data.flag===true){
            localStorage.setItem('token',p.data.token)
            localStorage.setItem('uid',p.data.uid)
            message.success('登陆成功');
            setTimeout(()=>{
              this.props.history.replace('/home/users')
            },1000)
          }else{
            message.error('账号密码错误, 请重试');
          }
        }catch(err){
          console.log(err)
        }
        
        

      };
    
      const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
      };
    
    
    
    
    return(
      
      <div style={{width:"400px",position:"absolute", left:"50%",marginLeft:"-200px",marginTop:"-150px", top:"50%", padding:"20px", border:"1px solid #ccc"}}>
        <Form
          {...layout}
          name="basic"
          
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="登陆账号"
            name="username"
            rules={[
              {
                required: true,
                message: '账号不能为空!',
              },
            ]}
          >
            <Input />
          </Form.Item>
    
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: '密码不能为空!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
    
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              登陆
            </Button>
          </Form.Item>
        </Form>
        
      </div>
      
    )
  }
}
export default withRouter(Login)